<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            欢迎界面
        </title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="css/main.css" media="all">
        <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" media="all">
        <link rel="stylesheet" href="lib/bootstrap/js/bootstrap.min.js" media="all">
    </head>
    <body>
    <style type="text/css">
	legend { display: block; width:100px; border-bottom:0px; font-family: "Microsoft YaHei","Helvetica Neue";}
	legend a{ color:#666;} legend a:hover{ text-decoration:none;}
	.layui-table{ font-family: "Microsoft YaHei","Helvetica Neue";}
	</style>
        <div class="x-body">
            <blockquote class="layui-elem-quote">
                欢迎使用小区物业管理系统！<span class="f-14">v1.0</span> &nbsp;&nbsp;
            </blockquote>
        <div class="row">
            <div class="col-xs-6 col-sm-4 col-md-3">
                <section class="panel">
                    <div class="symbol bgcolor-blue"> <i class=" iconfont icon-dashaxiaoqudizhi01"></i>
                    </div>
                    <div class="value tab-menu" bind="1">
                            <h1 id="zds"></h1>
                            <span>总栋数</span>
                    </div>
                </section>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
                <section class="panel">
                    <div class="symbol bgcolor-commred"> <i class="iconfont icon-lvhuaxiaoqu"></i>
                    </div>
                    <div class="value tab-menu" bind="1">
                        <h1 id="zhs"></h1>
                        <span>总户数</span>
                    </div>
                </section>
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
                <section class="panel">
                    <div class="symbol bgcolor-dark-green"> <i class="iconfont icon-yezhuxian"></i>
                    </div>
                    <div class="value tab-menu" bind="1">
                        <h1 id="zrs"></h1>
                        <span>入住人数</span>
                    </div>
                </section>
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
                <section class="panel">
                    <div class="symbol bgcolor-yellow-green"> <i class="layui-icon" style="top: 3px;">&#xe613;</i>
                    </div>
                    <div class="value tab-menu" bind="1">
                        <h1 id="kzl"></h1>
                        <span>房屋空置率</span>
                    </div>
                </section>
            </div>

        </div>
            
            <fieldset class="layui-elem-field layui-field-title site-title">
              <legend><a name="default">信息统计</a></legend>
            </fieldset>
             
        <!--相关统计-->
        <div class="row">
        <div class="col-sm-4">
         <section class="panel">
                    <div class="panel-heading">小区人数</div>
                    <div class="panel-body">
                        <div class="echarts" id="area" style="height:300px; height:350px"></div>
                    </div>
                </section>
        </div>
        <div class="col-sm-4">
         <section class="panel">
                    <div class="panel-heading">投诉次数</div>
                    <div class="panel-body">
                        <div class="echarts" id="main1" style="height:300px; height:350px"></div>
                    </div>
                </section>
        </div>
        <div class="col-sm-4">
         <section class="panel">
                    <div class="panel-heading">投诉满意度</div>
                    <div class="panel-body">
                        <div class="echarts" id="main2" style="height:300px; height:350px"></div>
                    </div>
                </section>
        </div>

        <div class="col-sm-6">
         <section class="panel">
                    <div class="panel-heading">最新活动</div>
                    <div class="panel-body">
                        <ul class="list-group clear-list m-t" id="ul1">

                        </ul>
                    </div>
                </section>
        </div>
            <div class="col-sm-6">
                <section class="panel">
                    <div class="panel-heading">最新报修</div>
                    <div class="panel-body">
                        <ul class="list-group clear-list m-t" id="ul2">

                        </ul>
                    </div>
                </section>
            </div>


        </div>
    
        <script src="lib/layui/layui.js" charset="utf-8"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/echarts.min.js"></script>

        <script type="text/javascript">


            $(window).on('load',function(){

                let item = localStorage.getItem("code");
                if (item != 0) {
                    window.location.href = "/login.jsp"
                }

                $.ajax({
                    url: "http://localhost:8888/hy-welcome/selectBuildAndUser",
                    dataType: "json",
                    success: function (ss) {
                        if(ss.code==0){
                            $("#zds").html(ss.zds);
                            $("#zhs").html(ss.zhs);
                            $("#zrs").html(ss.zrs);
                            var rzl = ss.kzl;
                            var kzl=100-rzl*100
                            $("#kzl").html(kzl+"%");
                        }
                    }
                });

                $.ajax({
                    url:"http://localhost:8888/hy-welcome/selectActivity",
                    dataType:"json",
                    type:"post",
                    success:function(data){
                        let length = data.length;
                        for (var i = 0; i < length; i++) {
                            var ss=i+1;
                            var li_str="<li class=\"list-group-item fist-item\"> <span class=\"float-right\">"
                                + " &nbsp;&nbsp; " +data[i].createTime +  " &nbsp;&nbsp; "
                                +"</span> <span class=\"label label-success\">"
                                + ss
                                +"</span>"
                                + " &nbsp;&nbsp; " +data[i].title+ " &nbsp;&nbsp; "
                                +"</li>";
                            $('#ul1').append(li_str);
                        }
                    }
                });

                $.ajax({
                    url:"http://localhost:8888/hy-welcome/selectRepairStream",
                    dataType:"json",
                    type:"post",
                    success:function(data){
                        let length = data.length;
                        for (var i = 0; i < length; i++) {
                            var ss=i+1;
                            var zt = "待接单";
                            if(data[i].state==1){
                                zt = "待接单";
                            } else if(data[i].state==2){
                                zt = "已接单";
                            } else if(data[i].state==3){
                                zt = "待评价";
                            } else if(data[i].state==4){
                                zt = "已结束";
                            }
                            var li_str="<li class=\"list-group-item\"> <span class=\"float-right\">"
                                + " &nbsp;&nbsp; " +data[i].createTime +  " &nbsp;&nbsp; "
                                +"<b style=\"color: #2fb9d4\">"
                                + zt
                                +"</b></span> <span class=\"label label-info\">"
                                + ss
                                + "</span>"
                                + " &nbsp;&nbsp; " +data[i].deviceName+ " &nbsp;&nbsp; "
                                +"</li>";
                            $('#ul2').append(li_str);
                        }

                    }
                });



            });
        </script>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例

        $.ajax({
            url:"${pageContext.request.contextPath}/hy-welcome/selectByMonth",
            dataType:"json",
            type:"post",
            success:function(data){
                var chartDom = document.getElementById('main1');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    xAxis: {
                        type: 'category',
                        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [data[0].count,data[1].count,data[2].count,data[3].count,data[4].count,data[5].count,data[6].count,data[7].count,data[8].count,data[9].count,data[10].count,data[11].count],
                        type: 'line',
                        // 显示数值
                        itemStyle : { normal: {label : {show: true}}}                    }]
                };

                option && myChart.setOption(option);

            }
        });

        $.ajax({
            url:"${pageContext.request.contextPath}/hy-welcome/selectByMonth2",
            dataType:"json",
            type:"post",
            success:function(data){
                var chartDom = document.getElementById('main2');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    xAxis: {
                        type: 'category',
                        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [data[0].count,data[1].count,data[2].count,data[3].count,data[4].count,data[5].count,data[6].count,data[7].count,data[8].count,data[9].count,data[10].count,data[11].count],
                        type: 'line',
                        // 显示数值
                        itemStyle : { normal: {label : {show: true}}}
                    }]
                };

                option && myChart.setOption(option);

            }
        });


    </script>

    <script type="text/javascript">


        $.ajax({
            url:"${pageContext.request.contextPath}/hy-welcome/selectUser",
            dataType:"json",
            type:"post",
            success:function(data){

                // 指定图表的配置项和数据
                var myChart = echarts.init(document.getElementById('area'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '小区人数统计',
                        subtext: '（人）',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    itemStyle: {

                        normal: {

                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，

                            color: function(params) {

                                // build a color map as your need.

                                var colorList = [

                                    '#27C24C','#F05050','#23b7e5','#7266ba','#18bc9c',

                                    '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',

                                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'

                                ];

                                return colorList[params.dataIndex]

                            },

                            //以下为是否显示，显示位置和显示格式的设置了

                            label: {

                                show: true,

                                position: 'top',

//                             formatter: '{c}'

                                formatter: '{b}\n{c}'

                            }

                        }

                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['1号楼', '2号楼', '3号楼', '4号楼', '5号楼']
                    },
                    series: [{
                        name: '小区人数',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            { value: data[0].count, name: '1号楼' },
                            { value: data[1].count, name: '2号楼' },
                            { value: data[2].count, name: '3号楼' },
                            { value: data[3].count, name: '4号楼' },
                            { value: data[4].count, name: '5号楼' }
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                myChart.currentIndex = -1;
                setInterval(function () {
                    var dataLen = option.series[0].data.length;
                    /*console.log(dataLen);*/
                    // 取消之前高亮的图形
                    myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: myChart.currentIndex
                    });
                    myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
                    // 高亮当前图形
                    myChart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: myChart.currentIndex
                    });
                }, 1000);

                option && myChart.setOption(option);

            }
        });

    </script>

    </div>

    <div class="layui-footer footer footer-demo">
        <div class="layui-main">
            <p>
                <a href="/">
                    @2021.05 小区物业管理系统
                </a>
            </p>

        </div>
    </div>

</body>
</html>